<template>
  <div class="header">
    <div class="shopInfo">
      <div class="avator">
        <img :src="seller.avatar" alt="">
      </div>
      <div class="detail">
        <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
        </div>
        <div class="desc">蜂鸟专送/{{seller.deliveryTime}}分钟送达</div>
        <div class="support">
          <span class="icon"></span>
          <span class="text" v-if="seller.supports">{{seller.supports[0].description}}</span>
        </div>
      </div>
      <div class="supportCount" v-if="seller.supports">
        <span class="count">{{seller.supports.length}}个</span>
        <span class="icon-keyboard_arrow_right"></span>
      </div>
    </div>
    <div class="notice">
      <div class="notice-icon"></div>
      <div class="notice-text">{{seller.bulletin}}</div>
      <i class="icon-keyboard_arrow_right"></i>
    </div>
    <div class="background">
      <img :src="seller.avatar" alt="背景" width="100%" height="100%">
    </div>
  </div>
</template>
<script>
export default {
  name: 'MHeader',
  props: {
    seller: {
      type: Object,
      required: true
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/common/stylus/mixin.styl'
.header
  position:relative
  overflow:hidden
  color:#ffffff
  background:rgba(7,17,27,0.5)
  .shopInfo
    position:relative
    padding: 24px 12px 18px 24px
    font-size: 0
    .avator
      display:inline-block
      vertical-align: top
      img
        border-radius:2px
        width:64px
    .detail
      display:inline-block
      margin-left:16px
      .title
        margin:2px 0 8px 0
        .brand
          display:inline-block
          vertical-align:top
          width:30px
          height:18px
          bg-image('~@/common/images/brand')
          background-size:30px 18px
          background-repeat:no-repeat
        .name
          margin-left:6px
          font-size:16px
          font-weight:bold
          line-height:18px
      .desc
        margin-bottom:10px
        font-size: 12px
        font-weight:200
        line-height:12px
      .support
        .icon
          display:inline-block
          vertical-align:top
          width:12px
          height:12px
          bg-image('~@/common/images/decrease_1')
          background-size:100%
          background-repeat:no-repeat
        .text
          margin-left:4px
          font-size:10px
          line-height:12px
          font-weight:200
    .supportCount
      position:absolute
      right:12px
      bottom:18px
      height:24px
      line-height:24px
      padding:0 8px
      text-align:center
      border-radius:14px
      background:rgba(0,0,0,.2)
      font-size:10px
      .count
        margin-right:2px
  .notice
    position:relative
    padding: 0 40px 0 12px
    height:28px
    line-height:28px
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    background:rgba(7,17,27,.2)
    .notice-icon
      display:inline-block
      width:22px
      height:12px
      vertical-align:top
      margin-top:8px
      bg-image('~@/common/images/bulletin')
      background-size:100%
      background-repeat:no-repeat
    .notice-text
      display:inline-block
      vertical-align:top
      margin:0 4px
      font-size:10px
    i
      position:absolute
      top:8px
      right:12px
      font-size:10px
  .background
    position:absolute
    top:0
    left:0
    width:100%
    height:100%
    z-index:-1
    filter: blur(10px)
</style>
